<template>
  <view class="comment" v-if="comment_list.length>0">
    <view class="item" v-for="(val,idx) in comment_list">
      <view class="info">
        <view class="l">
          <image class="avatar" v-if="val.user_avatar" :src="$xyfun.image(val.user_avatar_text)"></image>
          <image class="avatar" v-else :src="common.appConfig.useravatar"></image>
          <view class="user">
            <view>{{val.user_name_text}}</view>
            <text>{{ val.create_time }}</text>
          </view>
        </view>
        <view class="r">
          <view class="yz-iconfont yz-shoucang" :style="val.star>=1?'color:#ef9a38':''"></view>
          <view class="yz-iconfont yz-shoucang" :style="val.star>=2?'color:#ef9a38':''"></view>
          <view class="yz-iconfont yz-shoucang" :style="val.star>=3?'color:#ef9a38':''"></view>
          <view class="yz-iconfont yz-shoucang" :style="val.star>=4?'color:#ef9a38':''"></view>
          <view class="yz-iconfont yz-shoucang" :style="val.star>=5?'color:#ef9a38':''"></view>
        </view>
      </view>
      <view class="cont">{{val.content}}</view>
    </view>
  </view>
  <view v-else>
    <xy-empty :text="'暂无评论'"></xy-empty>
  </view>
</template>
<script>
import { mapState,mapActions } from 'vuex';
import xyEmpty from "@/components/xy-empty/index.vue";

export default {
  name: "xy-comment",
  components: {xyEmpty},
  props: {
    comment_list: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {

      goodsList: []
    };
  },
  created() {

  },
  computed: {
    ...mapState(['common','user'])
  },
  methods: {

  }
}
</script>
<style lang="scss">
.comment {
  width: 100%;
  overflow-y: auto;
  padding: 30rpx 30rpx 0 30rpx;
  .item {
    margin-bottom: 36rpx;
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .l {
        display: flex;
        .avatar {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        .user {
          view {
            font-size: 28rpx;
            color: #000;
          }
          text {
            margin-top: -2rpx;
            display: block;
            font-size: 22rpx;
          }
        }
      }
      .r {
        display: flex;
        margin-right: 34rpx;
        margin-top: -6rpx;
        view {
          color: #e0e0e0;
          margin-right: 4rpx;
          font-size: 18rpx;
        }
      }
    }

    .cont {
      margin-top: 20rpx;
      background: #f6f6f6;
      border-radius: 12rpx;
      padding: 30rpx;
      font-size: 24rpx;
    }
  }
}
</style>
